<ng-template #defaultItemTemplate let-item="item" let-term="term">
  <hi-hightlight [value]="formatter(item)" [term]="term"></hi-hightlight>
</ng-template>

<ul class="list-unstyled popup-list">
  <li *ngFor="let item of source; let $index = index;" class="dropdown-item"
      [ngClass]="{'bg-primary': $index == activeIndex}" (click)="onSelect(item)"
      (mouseenter)="onActiveIndexChange($index)">
    <ng-template [ngTemplateOutlet]="itemTemplate || defaultItemTemplate"
              [ngTemplateOutletContext]="{ formatter: formatter, term:term, source:source, item:item, $index:$index}"></ng-template>
  </li>
  <li class="dropdown-item" *ngIf="!source?.length && noResultItemTemplate != null">
    <ng-template [ngTemplateOutlet]="noResultItemTemplate"
              [ngTemplateOutletContext]="{ term:term, source:source}"> </ng-template>
  </li>
</ul>
